<script setup lang="ts">
import { nextTick, reactive, ref } from "vue";
import { numberApi } from "@/api/controller";
import { ToastSuccess, Toastloading } from "@/utils/public";
import xmUpload from "@/components/Upload/xm-upload.vue";
import serachUserid from '@/components/serachUserid/index.vue';
const dataForm = ref();
const formLabelWidth = "120px";
const $emit = defineEmits(["updateList"]);
const action = reactive({
  dialogFormVisible: false,
  durationOptions: [] as any[],
  reasonParents: [] as any[],
  reasons: [] as any[],
  serachUser:false,
  title:''
});
let form = reactive({
  user_id: "",
  report_user_id:"",
  uuid: "",
  guid: "",
  operate_info: "",
  pid: "",
  block_time: "",
  forbid_type: 1,
  operate_type: 1,
  delete_trend: false,
  reason_id: "",
  reason_img: [] as any[],
});
const formRules = {
  block_time: [
    { required: true, trigger: "change", message: "封号时长不可为空" },
  ],
  user_id: [
    { required: true, trigger: "change", message: "封号用户不可为空" },
  ],
  operate_type: [
    { required: true, trigger: "change", message: "操作类型不可为空" },
  ],
  pid: [
    { required: true, trigger: "change", message: "一级原因分类不可为空" },
  ],
  reason_id: [
    { required: true, trigger: "change", message: "二级原因分类不可为空" },
  ],
};
// 封号时长
const getDuration = async () => {
  if (action.durationOptions.length === 0) {
    const res = await numberApi.getUserBlockDuration();
    action.durationOptions = res.data;
  }
};
// 一级分类
const reasonClass = async () => {
  const res = await numberApi.getReasonClass({ pid: 0 });
  action.reasonParents = res.data;
};
// 二级分类
const reasonChange = async (id: number) => {
  form.reason_id = "";
  const loading = Toastloading();
  action.reasons = [];
  const res = await numberApi.getReasonClass({
    pid: id,
  });
  loading.close();
  action.reasons = res.data;
};
const handleSubmit = async() => {
  if(form.operate_type == 1) {
    dataForm.value.validate(async (valid: any) => {
      if(!valid) return
      const loading = Toastloading();
      if(!form.report_user_id){
        form.report_user_id = form.user_id
        await numberApi.forbid(form.report_user_id, form);
      }
      else{
        await numberApi.forbid(form.report_user_id, form);
      }
      loading.close();
      ToastSuccess("操作成功");
      closeDialog();
      $emit("updateList");
    });
  }else {
    const loading = Toastloading();
    const { user_id, uuid, operate_type, forbid_type, operate_info } = form;
    await numberApi.deblocking({
      user_id,
      uuid,
      operate_type,
      forbid_type,
      operate_info,
      operation_id: null,
    })
    loading.close();
    ToastSuccess("操作成功");
    closeDialog();
    $emit("updateList");
  }

};
const openDialog = async (query: any = {}) => {
  const {report_user_id, user_id, uuid, guid, operate_type = 1, nickname = ''} = query;
  const loading = Toastloading();
  form.user_id = user_id;
  form.report_user_id = report_user_id;
  form.operate_type = operate_type;
  form.uuid = uuid;
  form.guid = guid;
  action.serachUser = user_id?false:true
  action.title = form.operate_type?'封号':`解封${nickname}`
  await getDuration();
  await reasonClass();
  loading.close();
  action.dialogFormVisible = true;
};
const closeDialog = () => {
  form = reactive({
    user_id: "",
    uuid: "",
    guid: "",
    operate_info: "",
    pid: "",
    block_time: "",
    forbid_type: 1,
    operate_type: 1,
    delete_trend: false,
    reason_id: "",
    reason_img: [] as any[],
  });
  nextTick(() => {
    dataForm.value.clearValidate();
  });
  Object.assign(action, {
    dialogFormVisible: false,
    durationOptions: [] as any[],
    reasonParents: [] as any[],
    reasons: [] as any[],
  });
};
defineExpose({
  openDialog,
});
</script>

<template>
  <div>
    <el-dialog
      :style="{'---height':form.operate_type?'500px':'200px'}"
      top="5vh"
      class="xm-dialog"
      v-model="action.dialogFormVisible"
      :close-on-click-modal="false"
      :show-close="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :title="action.title"
    >
      <el-form
        ref="dataForm"
        :model="form"
        :label-width="formLabelWidth"
        :rules="formRules"
      >
        <el-form-item v-if="action.serachUser" label="UUID" prop="user_id">
          <serachUserid v-model:uuid="form.uuid" v-model:user_id="form.user_id" />
        </el-form-item>
        <template v-if="form.operate_type == 1">
          <el-form-item label="封号时长" prop="block_time">
            <el-select
              v-model="form.block_time"
              placeholder="封号时长"
            >
              <el-option
                v-for="item in action.durationOptions"
                :key="item[1]"
                :label="item[0]"
                :value="item[1]"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="一级原因分类" prop="pid">
            <el-select
              v-model="form.pid"
              placeholder="请选择一级原因分类"
              @change="reasonChange"
            >
              <el-option
                v-for="item in action.reasonParents"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="二级原因分类" prop="reason_id">
            <el-select
              v-model="form.reason_id"
              placeholder="请选择二级原因分类"
            >
              <el-option
                v-for="item in action.reasons"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="操作类型" prop="operate_type">
            <el-select
              v-model="form.operate_type"
              :disabled="true"
              placeholder="状态"
            >
              <el-option label="解封" :value="0" />
              <el-option label="封号" :value="1" />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="form.operate_type == 1"
            label="删除动态"
            prop="delete_trend"
          >
            <el-radio v-model="form.delete_trend" :label="false" border
              >否</el-radio
            >
            <el-radio v-model="form.delete_trend" :label="true" border
              >是</el-radio
            >
          </el-form-item>
          <el-form-item label="文件">
            <xmUpload
              :limit="4"
              v-model:fileList="form.reason_img"
            />
          </el-form-item>
        </template>

        <el-form-item label="操作说明" prop="operate_info">
          <el-input
            v-model="form.operate_info"
            type="textarea"
            :autosize="{ minRows: 6, maxRows: 6}"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="handleSubmit()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
:deep(.xm-dialog) {
  .el-dialog__body {
    height: var(---height);
    overflow-y: auto;
  }
}
</style>
